<template>
  <div class="dialog">
    <el-form ref="form" :model="tableData" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="tableData.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="tableData.gender"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="tableData.number"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
            v-model="tableData.birthday"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "EditData",
  props: {
    tableData: {
      name:"",
      gender:"",
      number:"",
      birthday:""
    }
  },
  data: function (){
    return {

    }
  },
  methods: {
    editUser(item,index) {
      this.userIndex = index
      this.editData = {
        name: item.name,
        gender: item.gender,
        number: item.number,
        birthday: item.birthday
      }
    },
    confirm() {
      // this.tableData[this.userIndex] = this.editData;
      Vue.set(this.tableData,this.userIndex,this.editData)
    }
  }
}
</script>


